T.CanvasOverlay = T.Overlay.extend({
    options: {
        opacity: 1, //透明度
        size: 200, //大小
    },
    initialize: function (draw, options) {
        this._draw = draw;
        T.setOptions(this, options);
    },
    onAdd: function (map) {
        this._map = map;
        var size = this.options.size;
        var point = this.options.point;
        var p = map.lngLatToLayerPoint(new T.LngLat(point[0], point[1])); // 中心
        this._point1 = map.layerPointToLngLat(new T.Point(p.x-size/2, p.y-size/2)); // 左上角
        this._point2 = map.layerPointToLngLat(new T.Point(p.x+size/2, p.y+size/2)); // 右下角

        if (!this._canvas) {
            this._initCanvas();
            this._update();
            if (this.options.opacity < 1) {
                this._updateOpacity();
            }
        }
        this._map.on("zoomend", this._update, this)
        this._map.getPanes().overlayPane.appendChild(this._canvas);
    },
    onRemove: function () {
        this._map.off("zoomend", this._update, this)
        this._map.getPanes().overlayPane.removeChild(this._canvas);
        this._map = null;
        this._canvas = null;
    },
    bringToFront: function () {
        if (this._canvas) {
            this._canvas.parentNode.appendChild(this._canvas);
        }
        return this;
    },
    bringToBack: function () {
        if (this._canvas) {
            var parent = this._canvas.parentNode;
            parent.insertBefore(this._canvas, parent.firstChild);
        }
        return this;
    },
    _initCanvas: function () {
        this._canvas = document.createElement('canvas');
        this._ctx = this._canvas.getContext('2d');
    },
    _update: function () {
        var canvas = this._canvas;
        var p1 = this._map.lngLatToLayerPoint(this._point1);
        var p2 = this._map.lngLatToLayerPoint(this._point2);
        var size = Math.abs(p1.x - p2.x);
        canvas.width = canvas.height = size;
        canvas.style.left = p1.x + "px";
        canvas.style.top = p1.y + "px";
        this._draw(this._ctx, size);
    },
    _updateOpacity: function () {
        var el = this._canvas;
        if ('opacity' in el.style) {
            el.style.opacity = this.options.opacity;
        } else if ('filter' in el.style) {
            this._setOpacityIE(el, this.options.opacity);
        }
    },
    _setOpacityIE: function (el, value) {
        var filter = false,
            filterName = 'DXCanvasTransform.Microsoft.Alpha';
        try {
            filter = el.filters.item(filterName);
        } catch (e) {
            if (value === 1) {
                return;
            }
        }
        value = Math.round(value * 100);
        if (filter) {
            filter.Enabled = (value !== 100);
            filter.Opacity = value;
        } else {
            el.style.filter += ' progid:' + filterName + '(opacity=' + value + ')';
        }
    },
    setOpacity: function (opacity) {
        this.options.opacity = opacity;
        if (this._canvas) {
            this._updateOpacity();
        }
        return this;
    },
    getOpacity: function () {
        return this.options.opacity ;
    },
    setDraw: function (draw) {
        this._draw = draw;
        if (this._canvas) {
            this._canvas.src = draw;
        }
        return this;
    },
    getDraw :function () {
        return this._draw;
    },
    setPoint: function (point) {
        this._point = new T.LngLat(point[0], point[1]);
        if (this._point) {
            this._update();
        }
    },
    setPoint: function () {
        return this._point;
    },
    getElement: function () {
        return this._canvas;
    },
});
